<template>
	<view>
		<view class="whiteLine mtb20">
			<view class="flexR between p10">
				<view>
					<image class="imgs" mode="widthFix" src="@/static/imgs/icon-tip.png"></image>
					<span class="info">{{ info.driverName }}</span>
				</view>
				<image style="width: 20px;" mode="widthFix" src="@/static/imgs/icon-warn.png"></image>
			</view>
			<view class="line"></view>
			<view class="p10 flexR">
				<image class="imgs" mode="widthFix" src="@/static/imgs/icon-time.png"></image>
				<span class="c80">{{ info.updateTime }}</span>
				<view class="flow"></view>
				<image class="imgs" mode="widthFix" src="@/static/imgs/icon-localtion.png"></image>
				<span class="c80">{{ info.address || '暂无' }}</span>
			</view>
			<!-- <view class="p10">
				<view class="flexR between">
					<view>
						<image class="imgs" mode="widthFix" src="@/static/imgs/icon1.png"></image>
						<span class="name">温度：</span>
						<span class="name" :class="[info.temperatureRed ? 'red' : 'green']">{{info.deviceSensibility.temperature}}℃</span>
					</view>
					<span class="tt" :style="{'color': info.temperatureRed && 'red' || '#11A8A3',}">
						{{info.temperatureRed && '↑' || '--'}}
					</span>
				</view>
				<view class="flexR between mt10">
					<view>
						<image class="imgs" mode="widthFix" src="@/static/imgs/icon2.png"></image>
						<span class="name">湿度：</span>
						<span class="name" :class="[info.humidityRed ? 'red' : 'green']">{{info.deviceSensibility.humidity}}%</span>
					</view>
					<span class="tt" :style="{'color': info.humidityRed && 'red' || '#11A8A3',}">
						{{info.humidityRed && '↑' || '--'}}
					</span>
				</view>
				<view class="flexR between mt10">
					<view>
						<image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span class="name">空气颗粒度0.3：</span>
						<span class="name" :class="[info.particle3Red ? 'red' : 'green']">{{info.deviceSensibility.particle3}}μm</span>
					</view>					
					<span class="tt" :style="{'color': info.particle3Red && 'red' || '#11A8A3',}">
						{{info.particle3Red && '↑' || '--'}}
					</span>
				</view>
				<view class="flexR between mt10">
					<view>
						<image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span class="name">空气颗粒度0.5：</span>
						<span class="name" :class="[info.particle5Red ? 'red' : 'green']">{{info.deviceSensibility.particle5}}μm</span>
					</view>					
					<span class="tt" :style="{'color': info.particle5Red && 'red' || '#11A8A3',}">
						{{info.particle5Red && '↑' || '--'}}
					</span>
				</view>
				<view class="flexR between mt10">
					<view>
						<image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span class="name">空气颗粒度1.0：</span>
						<span class="name" :class="[info.particle10Red ? 'red' : 'green']">{{info.deviceSensibility.particle10}}μm</span>
					</view>					
					<span class="tt" :style="{'color': info.particle10Red && 'red' || '#11A8A3',}">
						{{info.particle10Red && '↑' || '--'}}
					</span>
				</view>
				<view class="flexR between mt10">
					<view>
						<image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span class="name">空气颗粒度2.5：</span>
						<span class="name" :class="[info.particle25Red ? 'red' : 'green']">{{info.deviceSensibility.particle25}}μm</span>
					</view>					
					<span class="tt" :style="{'color': info.particle25Red && 'red' || '#11A8A3',}">
						{{info.particle25Red && '↑' || '--'}}
					</span>
				</view>
				<view class="flexR between mt10">
					<view>
						<image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span class="name">空气颗粒度5.0：</span>
						<span class="name" :class="[info.particle50Red ? 'red' : 'green']">{{info.deviceSensibility.particle50}}μm</span>
					</view>					
					<span class="tt" :style="{'color': info.particle50Red && 'red' || '#11A8A3',}">
						{{info.particle50Red && '↑' || '--'}}
					</span>
				</view>
				<view class="flexR between mt10">
					<view>
						<image class="imgs" mode="widthFix" src="@/static/imgs/icon3.png"></image>
						<span class="name">空气颗粒度10.0：</span>
						<span class="name" :class="[info.particle100Red ? 'red' : 'green']">{{info.deviceSensibility.particle100}}μm</span>
					</view>					
					<span class="tt" :style="{'color': info.particle100Red && 'red' || '#11A8A3',}">
						{{info.particle100Red && '↑' || '--'}}
					</span>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
export default {
	props: ['info'],
	data() {
		return {
			title: 'page',
		};
	},
	onLoad() {

	},
	methods: {

	}
}
</script>

<style lang="scss" scoped>
.info {
	font-weight: bold;
}

.tt {
	margin-right: 4px;
	font-weight: bold;
}

.red {
	color: red !important;
	;
}

.green {
	color: #11A8A3 !important;
}

.imgs {
	width: 15px;
	margin-right: 10px;
}

.name {
	font-size: 14px;
	color: #808080;
}

.name2 {
	font-size: 16px;
	font-weight: bold;
}

.bg {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: -1;
}

.list {
	width: 33%;
	align-items: flex-start;
}
</style>
